<template>
  <div>
    <el-card class="box-card card">
      <el-form ref="form" :inline="true" label-width="80px" :model="form" size="small">
        <el-form-item label="标签名称" style="width:300px">
          <el-input v-model="tags" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="省份" style="width:300px">
          <el-select
            v-model="province"
            placeholder="请选择省"
            @change="changePro"
          >
            <el-option
              v-for="item in addressData"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" style="width:300px">
          <el-select
            v-model="city"
            placeholder="请选择市"
            @change="changeCity"
          >
            <el-option
              v-for="item in cityData"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地区" style="width:300px">
          <el-select
            v-model="form.temp"
            placeholder="请选择区"
            @change="changeArea"
          >
            <el-option
              v-for="item in areaData"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公司简称" style="width:300px">
          <el-input v-model="shortName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state" placeholder="请选择">
            <el-option label="启用" value="shanghai" />
            <el-option label="禁用" value="beijing" />
          </el-select>
        </el-form-item>
        <el-button class="clear" size="small" @click="empty">清空</el-button>
        <el-button type="primary" size="small" @click="toSearch">搜索</el-button>
        <el-button icon="el-icon-edit" type="success" round class="addBtn" size="small" @click="addUser">新增用户</el-button>
      </el-form>

      <el-alert
        type="info"
        show-icon
        :closable="false"
      >
        <slot name="title"><span>共 {{ page.total }} 条记录</span></slot>
      </el-alert>
      <div>
        <el-table
          :data="tableData"
          style="width:100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="120"
          />
          <el-table-column
            prop="number"
            label="企业编号"
            width="180"
          />
          <el-table-column
            prop="shortName"
            label="企业简称"
          />
          <el-table-column
            prop="tags"
            label="标签"
          />
          <el-table-column
            prop="creatorID"
            label="创建者"
          />
          <el-table-column
            prop="addDate"
            label="创建日期"
          /><el-table-column
            prop="remarks"
            label="备注"
          /><el-table-column
            prop="state"
            label="状态"
          >
            <template scope="scope">
              {{ scope.row.state | transferTime }}
            </template></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                @click="redact(scope.row.id)"
              />

              <el-button
                type="success "
                icon="el-icon-check"
                circle
                size="mini"
                @click="open(scope.row.id)"
              />

              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="delet(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <addEnterprise :showdialog.sync="showdialog" :list="list " @reAfterAdd="reAfterAdd(page)" />
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          background
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="page.page"
          :page-size="page.pagesize"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import address from './address/address.json' // 全国省市区街道数据
import addEnterprise from './components/add-enterprise.vue'
import { getcompanys, delCompanys, updateCompanys } from '@/api/enterprise'

export default {
  filters: {
 transferTime(value) {
    return value ? '启用' : '禁用'
    }
    // transferTime1(value) {
    //   value.isFamous ? 'true' : 'false'
    //   console.log(value, '123123')
    //   return value
    // }

},
  components: {
    addEnterprise
  },
  data() {
    return {
      list: {},
      tableData: [],
      showdialog: false,
      tags: '',
      shortName: '',
      state: '',
      province: '',
      city: '',
      //  省数据
      addressData: [],
      //  市数据
      cityData: [],
      // 区数据
      areaData: [],
      // 街道数据
      form: {
      },
      searchVal: '',
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 5,
        total: 0 // 记录总数
      }
    }
  },
  created() {
    // 省份数据初始化
    this.addressData = address
    this.getcompanys(this.page)
  },
  methods: {
     // 搜索用户的方法
     fuzzyQuery(list, keyWord) {
      var reg = new RegExp(keyWord)
      var arr = []
      for (var i = 0; i < list.length; i++) {
        if (reg.test(list[i].shortName)) {
          arr.push(list[i])
        }
      }
      return arr
    },
    // 刷新用户列表方法，供子组件$emit调用
    reAfterAdd(page) {
      this.getcompanys(page)
      console.log('reAfterAdd')
    },
    // 搜索
    toSearch() {
      console.log('开始搜索,关键词是：', this.tags)
      // 根据username筛选
      this.tableData = this.fuzzyQuery(this.tableData, this.tags)
      this.page.total = this.tableData.length
    },
    // 省份更改
    changePro(e) {
      // 从省中过滤出市的数据
      this.cityData = this.addressData.filter((item) => {
        return item.name === e
      })[0].children
      // 省发生改变的时候 清空输入框市区街道的内容
      this.form.district = ''
      // 省发生更改时 该表空区街道数据的内容
      this.areaData = []
    },
    // 市更改
    changeCity(e) {
      // 获取到区的数据
      this.areaData = this.cityData.filter(
        (item) => item.name === e
      )[0].children
      // 清空数据后面对应数组的数据
      this.form.district = ''
    },
    // 区更改
    changeArea(e) {
      const temp = this.areaData.filter((item) => item.name === e)

      // 获取到区的code码
      this.form.regionalNumber = temp[0].code
      // 获取到街道的数据
      this.jdData = this.areaData.filter((item) => item.name === e)[0].children
    },

    // 清空
    empty() {
      this.tags = ''
      this.shortName = ''
      this.region = ''
      this.state = ''
      this.province = []
      this.city = []
      this.district = []
    },
// 添加
    async addUser() {
      this.showdialog = true
    },
    // 企业列表
    async getcompanys() {
      const { items, counts } = await getcompanys(this.page)
      // console.log(res, '1231232')
      this.page.total = counts
      this.tableData = items
      console.log(this.tableData, '页面渲染')
    },

        // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      },
    handleCurrentChange(num, val) {
      console.log(`当前页: ${val}`)
      this.page.page = num
      this.getcompanys(this.page)
    },

    // 编辑
    async redact(id) {
      // console.log(id)
      this.list = await updateCompanys(id)
      console.log(this.list, '页码信息')
      this.showdialog = true
    },

    // 删除
    async delet(id) {
      await this.$confirm('您确定删除吗')
      await delCompanys(id)
      this.getcompanys(this.page)
      this.$message.success('删除成功')
    },

    // 修改状态
    async open(id) {
      this.list = await updateCompanys(id)
      if (this.list.state === 1) {
        this.$confirm('已成功启用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list.state = 0
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      } else {
        this.$confirm('已成功禁用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list.state = '启用'
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
      this.getcompanys(this.page)
      }

      }
  }

</script>

<style lang="scss" scoped>
.card{
  position: relative;
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: #fff;
}
.addBtn{
position: absolute;
right: 15px;
}
.clear{
  margin-left: 70px;
  /* margin-right: 10px; */
}

</style>
